<template>
  <div class='company-select-container'>
    <el-select v-model="selectedCompany"
               value-key="company_id"
               @change="chooseComapny">
      <el-option v-for="(item) in choosedCompanyList"
                 :key="item.company_id"
                 :label="item.company_name"
                 :value="item">
      </el-option>
    </el-select>
    <el-button type="primary"
               @click="showCompanyList">
      选择单位
    </el-button>
    <CompanyListDialog @choose="chooseCompanyCb"
                       :dialogVisible.sync="companyListDialogVisible"></CompanyListDialog>
  </div>
</template>
<script>
import CompanyListDialog from './components/CompanyListDialog'
export default {
  data () {
    return {
      // 已选中的公司列表
      choosedCompanyList: [],
      selectedCompany: {

      },
      // 选择单位弹框是否可见
      companyListDialogVisible: false
    }
  },
  components: {
    CompanyListDialog
  },
  props: {
    choose: {
      type: Function
    }
  },
  methods: {
    //页面刷新
    beforeunloadHandler (e) {
      e = e || window.event
      if (e) {
        window.sessionStorage.removeItem('unitData')
        window.sessionStorage.removeItem('unitDefaultData')
      }
    },
    chooseComapny (val) {
      this.$emit('choose', this.selectedCompany)
      let unitOne = {
        company_id: this.selectedCompany.company_id,
        company_name: this.selectedCompany.company_name
      }
      window.sessionStorage.setItem('unitDefaultData', JSON.stringify(unitOne))
    },
    showCompanyList () {
      this.companyListDialogVisible = true
    },
    // 选择单位弹框回调事件
    chooseCompanyCb (data) {
      this.selectedCompany = data
      let flag = false
      this.choosedCompanyList.map((item) => {
        if (item.company_id === data.company_id) {//重复选择时,表格中选中之后,外面的input的默认值也随之变化
          flag = true
          let unitTwo = {
            company_id: data.company_id,
            company_name: data.company_name
          }
          window.sessionStorage.setItem('unitDefaultData', JSON.stringify(unitTwo))
        }
      })
      if (!flag) {
        // this.choosedCompanyList.push(data)
        let selData = {
          company_id: data.company_id,
          company_name: data.company_name
        }
        this.choosedCompanyList.push(selData)
        window.sessionStorage.setItem('unitData', JSON.stringify(this.choosedCompanyList))
        let unitTwo = {
          company_id: data.company_id,
          company_name: data.company_name
        }
        window.sessionStorage.setItem('unitDefaultData', JSON.stringify(unitTwo))
      }
      this.$emit('choose', this.selectedCompany)
      // console.log(data, 'call back')
    }
  },
  created () {

    //获取存储的单位信息
    let unit = JSON.parse(window.sessionStorage.getItem('unitData'))
    let unitDefault = JSON.parse(window.sessionStorage.getItem('unitDefaultData'))
    if (JSON.stringify(this.selectedCompany) == "{}" && unit) {
      this.choosedCompanyList = unit
      if (unitDefault) {
        this.selectedCompany = unitDefault
        this.$emit('choose', this.selectedCompany)
      }
    }
  },
  mounted () {
    //监听页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  destroyed () {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
}
</script>
<style scoped lang='scss'>
.company-select-container {
  width: 320px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  .el-button {
    background-color: #1abc9c;
  }
}
</style>
